body {
    display: flex;
    flex-direction: column
}

ul,
li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.layout {
    display: flex;
    width: 100%;
    height: 150px;
}

.layout .layout-cnt {
    width: 200px;
    height: 150px;
    flex-direction: column
}

.container {
    display: flex;
    width: 100px;
    height: 100px;
    margin: 10px;
    background: #333;
    border-radius: 10px;
}

h2 {
    margin: 0;
    padding: 0;
    font-size: 12px;
}

.container li {
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    background: #fff;
    border-radius: 50px;
}

.tmp-style-nowrap {
    /* 
     在主轴上的对其方向
     注意：这里的主轴并不一定是水平轴，主要根据flex-direction的值来决定
      row  row-reverse column column-reverse 
    */
    flex-direction: row;
    /*
    定义元素超出容器的如何处理
        nowrap:默认值,不处理
        wrap: 超出的时候沿着主轴，不占用原来主轴上排列元素的位置，在交叉轴上从起点往终点重新开始排列元素。不会影响原来的元素的位置
        wrap-reverse: 反转，与wrap正好相反的排列方式，会将原有元素向交叉轴终点位置推动。占据其原有位置,并且元素的排列以主轴作为对称轴，与wrap进行对称，wrap-reverse的元素从交叉轴终点向起点按照flex-direction定义的值开始排列。
        或者也可以理解为：wrap与wrap-reverse是以交叉轴中间点进行对称
    */
    flex-wrap: nowrap;
    /* 
        复合属性：是flex-direction与flex-wrap 一起使用的结果
        多数的属性复合与上面的介绍是一样的，特殊就是
        flex-flow: row nowrap;
        会考虑到放大与缩小的因素，会在主轴上放大或者缩小
    */
    /* flex-flow: row nowrap; */
}

.tmp-style-wrap {
    flex-direction: row;
    flex-wrap: wrap;
}

.tmp-style-wrap-reverse {
    flex-direction: row;
    flex-wrap: wrap-reverse;
}

/* justify-content用于定义元素在主轴上面的位置 */
.tmp-style-justify-content-flex-start {
    flex-direction: row;
    /* 主轴起点位置对齐 */
    justify-content: flex-start;
}

.tmp-style-justify-content-flex-end {
    flex-direction: row;
    /* 主轴终点位置对齐 */
    justify-content: flex-end;
}

.tmp-style-justify-content-center {
    flex-direction: row;
    /* 主轴中间点位置对齐 */
    justify-content: center;
}

.tmp-style-justify-content-space-between {
    flex-direction: row;
    /* 两端对齐，项目之间的间隔都相等 */
    justify-content: space-between;
}

.tmp-style-justify-content-space-around {
    flex-direction: row;
    /* 每个项目两侧的间隔相等。
        所以，项目之间的间隔比项目与边框的间隔大一倍。 */
    justify-content: space-around;
}

/* align-items 定义元素在交叉轴上面定义对齐方式 */

.tmp-style-align-items-flex-start {
    flex-direction: row;
    /* 交叉轴的起点对齐 */
    align-items: flex-start;
}

.tmp-style-align-items-flex-end {
    flex-direction: row;
    /* 交叉轴的终点对齐 */
    align-items: flex-end;
}

.tmp-style-align-items-center {
    flex-direction: row;
    /* 交叉轴的中点对齐 */
    align-items: center;
}

.tmp-style-align-items-baseline {
    flex-direction: row;
    /* 项目的第一行文字的基线对齐 */
    align-items: baseline;
}

/* 配合 align-items: stretch使用*/
.tmp-style-align-items-stretch li {
    height: auto;
}

.tmp-style-align-items-stretch {
    flex-direction: row;
    /* 如果项目未设置高度或设为auto，
    将占满整个容器的高度*/
    align-items: stretch;
}

/* align-content 交叉轴上的布局方式
    仅在多根交叉轴线的时候生效，单条交叉轴线不生效
*/
.tmp-style-align-content-flex-start {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
}

.tmp-style-align-content-flex-end {
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-end;
}

/* 
align-items：
    align-items属性适用于所有的flex容器，它是用来设置每个flex元素在交叉轴上的默认对齐方式。 
    和align-content有相同的功能，不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。
align-content:
    align-content属性只适用于多行的flex容器，并且当侧轴上有多余空间使flex容器内的flex线对齐。 
*/